<template>
	<!-- pages/login.wxml -->
	<view class="page">
		<view class="topBg"></view>
		<view class="loginBox">
			<view class="topTitle">手机号登录</view>
			<view class="flex align-center phoneInput solid-bottom">
				<view class="phoneInputLeft">+86</view>
				<view class="rightDivide"></view>
				<input style="padding-left: 26rpx" placeholder-style="color:#B1B4C3;font-size:32rpx" type="text"
					v-model="phone" placeholder="请输入手机号码" />
			</view>
			<view class="codeInput flex align-center solid-bottom">
				<input class="flex-1" placeholder-style="color:#B1B4C3;font-size:32rpx" type="text" v-model="code"
					placeholder="请输入验证码" />
				<view class="codeRight"
					:style="'color:' + (codeState ? '#B1B4C3' : '#0077FF') + ';padding-right: ' + (codeState ? '30rpx' : '') + ';'"
					@tap="getCode">
					{{ codeState ? seconds + ' s' : '获取验证码' }}
				</view>
			</view>
			<u-button @tap.native="toLogin" type="primary" size="large" color="#0077FF"
				custom-style="margin-top: 134rpx;border-radius: 12rpx;">登录</u-button>
			<!-- #ifdef MP-WEIXIN -->
			<view style="margin-top: 30px;">
				<u-divider text="其他登录方式"></u-divider>
				<view class="wechatBox flex align-center justify-center" @click="toWechatLogin">
					<image src="../../static/images/login/wechat.svg" style="width: 28px;"></image>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="bottomTitle flex flex-direction align-center">
			<view>未注册手机号登录后将自动生成账号且代表您</view>
			<view>
				<text>已阅读并同意</text>
				<text class="agreement" @tap="toArrgement">《用户协议》</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		request
	} from '../../utils/request';
	// pages/login.ts
	export default ({
		data() {
			return {
				app: null,
				phone: '',
				code: '',
				codeState: false,
				seconds: 60,
				timer: null
			};
		},
		onLoad(){
			this.app = getApp()
		},
		methods: {
			// 微信登录
			toWechatLogin() {
				uni.navigateTo({
					url: '/pages/wechatLogin/wechatLogin'
				})
			},
			// 校验手机号
			validatePhoneNumber(phone) {
				if (!phone) {
					return 'empty' //手机号为空
				}
				// 定义手机号的正则表达式规则
				var regExp = /^1[3456789]\d{9}$/;

				if (regExp.test(phone)) {
					return 'ok'; // 符合手机号格式要求
				} else {
					return 'no'; // 不符合手机号格式要求
				}
			},
			// 点击获取验证码
			async getCode() {
				if (this.codeState) {
					return false;
				}
				if (this.timer) {
					clearInterval(this.timer);
				}
				let result = this.validatePhoneNumber(this.phone);
				if (result != 'ok') {
					uni.showToast({
						icon: 'none',
						title: result == 'no' ? '手机号格式错误' : '请输入手机号'
					})
					return false
				}
				let res = await this.getPhoneCode()
				uni.showToast({
					icon: 'none',
					title: res
				})
				if (res == '验证码已发送') {
					this.codeState = true
					let timer = setInterval(() => {
						this.seconds = this.seconds - 1
						if (this.seconds == 0) {
							this.codeState = false
							this.seconds = 60
							clearInterval(this.timer);
						}
					}, 1000);
					this.timer = timer
				}

			},
			// 获取验证码
			getPhoneCode() {
				return new Promise((resolve, reject) => {
					request({
						url: 'common/get-phone-code',
						method: 'POST',
						data: {
							phone: this.phone
						}
					}).then((res) => {
						if (res.code == 200) {
							resolve('验证码已发送')
						} else if (res.code == 500) {
							if (res.msg == '刚发的验证码，5分钟有效') {
								resolve('不可重复获取验证码')
							}
						}
					})
				})

			},
			// 去登录
			toLogin() {
				let result = this.validatePhoneNumber(this.phone);
				if (result != 'ok') {
					uni.showToast({
						icon: 'none',
						title: result == 'no' ? '手机号格式错误' : '请输入手机号'
					})
					return false
				}
				if (!this.code) {
					uni.showToast({
						icon: 'none',
						title: '验证码不能为空'
					})
					return false
				} else if (this.code.length != 6) {
					uni.showToast({
						icon: 'none',
						title: '验证码长度为6位'
					})
					return false
				}
				request({
					url: 'common/phone-code-login',
					method: 'POST',
					data: {
						phone: this.phone,
						code: this.code
					}
				}).then(async (res) => {
					if (res.code == 200) {
						this.app.globalData.userInfo.ouid = res.data.ouid;
						let userInfo = await this.app.getUserInfo()
						uni.showToast({
							icon: 'none',
							title: '登录成功',
							success: () => {
								// #ifdef MP-WEIXIN
								// 如果userInfo中没有返回wx_openid,则请求微信登录传递code给后端
								if (!userInfo.wx_openid) {
									wx.login({
										success: function(result) {
											if (result.code) {
												// code已经获取到了，可以将其发送给后台服务器	
												request({
													url: 'wx/get/wx/id',
													method: 'POST',
													data: {
														code: result.code,
														user_ouid: res.data
															.ouid,
														type: 'A', //A:微信小程序 
													}
												}).then(() => {

												})
											} else {}
										}
									});
								}
								// #endif
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/index/index'
									});
								}, 1000)

							}
						})

					} else if (res.code == 500) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})

			},
			// 去用户协议页
			toArrgement() {
				uni.navigateTo({
					url: '/pages/arrgement/arrgement'
				});
			},

		}
	});
</script>
<style scoped>
	/* pages/login.wxss */
	.page {
		width: 100vw;
		box-sizing: border-box;
		height: 100vh;
		padding: 0 32rpx;
		padding: 284rpx 32rpx 0;
	}

	.topBg {
		width: 100%;
		height: 378rpx;
		position: fixed;
		left: 0;
		top: 0;
		background: url() no-repeat;
		background-position: -180rpx -350rpx;
		/* background-color: #aaa; */
	}

	.loginBox {}

	.topTitle {
		font-family: Alibaba PuHuiTi 2;
		font-size: 48rpx;
		font-weight: 600;
		line-height: 68rpx;
		color: #0b1526;
	}

	.phoneInput {
		margin-top: 134rpx;
		padding-bottom: 32rpx;
	}

	.rightDivide {
		width: 2rpx;
		height: 24rpx;
		opacity: 1;
		background: #e3e8f2;
		margin-left: 26rpx;
	}

	.phoneInputLeft {
		font-family: Alibaba PuHuiTi 2;
		font-size: 32rpx;
		font-weight: normal;
		color: #0b1526;
	}

	.codeInput {
		margin-top: 48rpx;
		padding-bottom: 32rpx;
	}

	.codeRight {
		font-family: Alibaba PuHuiTi 2;
		font-size: 32rpx;
		font-weight: normal;
		color: #0077ff;
	}

	.chatLogin {
		width: 496rpx;
		margin: 80rpx auto 0;
	}

	.wechatBox {
		width: 96rpx;
		height: 96rpx;
		background: rgba(177, 180, 195, 0.3);
		margin: 0 auto;
		border-radius: 50%;
	}

	.bottomTitle {
		position: fixed;
		width: 100%;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100rpx;
		font-family: Alibaba PuHuiTi 2;
		font-size: 24rpx;
		color: #b1b4c3;
		line-height: 40rpx;
	}

	.agreement {
		color: #0077ff;
	}
</style>